<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平面矩形填充</title>
    <link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
    <script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
    <div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider:new Cesium.UrlTemplateImageryProvider({
            url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', //本机地图服务
            fileExtension : "png",
        }),
        geocoder:false, //一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton:true, //首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker:true, //切换2D、3D 和 Columbus View (CV) 模式。
        baseLayerPicker:false, //选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton:true, //帮助提示，如何操作数字地球。
        animation:false,//控制视窗动画的播放速度。
        creditsDisplay:false, //展示商标版权和数据源。
        timeline:false, //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton:true, //视察全屏按钮
    });
    viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球

    //添加矩形
    viewer.entities.add({
        name : 'Yellow plane outline',
        position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 0),
        plane : {
            plane : new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),//平面的法线
            dimensions : new Cesium.Cartesian2(400000.0, 300000.0),
            fill : true,
            //material:Cesium.Color.RED.withAlpha(0.5),透明度
            material:new Cesium.GridMaterialProperty({
                color : Cesium.Color.YELLOW,
                cellAlpha : 0.2,
                lineCount : new Cesium.Cartesian2(8, 8),
                lineThickness : new Cesium.Cartesian2(2.0, 2.0)
            }),
            outline : true,
            outlineColor : Cesium.Color.RED
        }
    })


    var stripeMaterial = new Cesium.StripeMaterialProperty({
        evenColor: Cesium.Color.WHITE.withAlpha(0.5),
        oddColor: Cesium.Color.BLUE.withAlpha(0.5),
        repeat: 5.0,
    });
    viewer.entities.add({
        polygon: {
            hierarchy: new Cesium.PolygonHierarchy(
                Cesium.Cartesian3.fromDegreesArray([
                    -107.0,
                    27.0,
                    -107.0,
                    22.0,
                    -102.0,
                    23.0,
                    -97.0,
                    21.0,
                    -97.0,
                    25.0,
                    -99.0,
                    26.0,
                ])
            ),
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 4,
            material: stripeMaterial,
        },
    });

</script>